﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="PageTitle" runat="server">
    <title>项目模板</title>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageStyles" runat="server">
    <style>
        .projectTemplate-container
        {
            background-color: #fff;
            /*border-bottom: 1px #444 solid;*/
            font-size: 16px;
        }
        .highlight
        {
            background-color: #eee;
            border-bottom: 1px solid Green;
            border-top: 1px solid Green;
            font-weight: bold;
        }
        .delete-btn
        {
            opacity: 0.6;
            margin-top: 3px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageScripts" runat="server">
    <script src="../../Scripts/json2.js"></script>
    <script src="../../Scripts/underscore-1.1.6.js"></script>
    <script src="../../Scripts/backbone.js"></script>
    <script src="../../Scripts/backbone-localstorage.js"></script>
    <script type="text/x-jquery-template" id="projecttemplate-template">
      <div class='projectTemplate-container'>
        ${Name}
        <span class="delete-btn ui-icon ui-icon-circle-close" style="cursor:pointer;display:inline-block;float:right;" title="删除该项目模板"></span>
      </div>
    </script>
    <script type="text/javascript">
        $(function () {
            //Models
            window.ProjectTemplate = Backbone.Model.extend({
                // Default attributes for the todo.
                defaults: {
                    CreateOn: new Date()
                },

                // Ensure that each todo created has `content`.
                initialize: function () {
                    if (!this.get("CreateOn")) {
                        this.set({ "CreateOn": this.defaults.CreateOn});
                    }
                },

                // Remove this Todo from *localStorage* and delete its view.
                clear: function () {
                    //EzDesk.Service.RemoveProjectTemplate(null,{id:this.Id});
                    this.destroy();
                    this.view.remove();
                }
            });
            window.ProjectTemplateList = Backbone.Collection.extend({

                // Reference to this collection's model.
                model: ProjectTemplate,

                localStorage: new Store("projectTemplatesStore"),

                // We keep the Todos in sequential order, despite being saved by unordered
                // GUID in the database. This generates the next order number for new items.
                nextOrder: function () {
                    if (!this.length) return 1;
                    return this.last().get('order') + 1;
                },

                // Todos are sorted by their original insertion order.
                comparator: function (projecttemplate) {
                    return projecttemplate.get('CreateOn');
                }

            });
            window.ProjectTemplates = new ProjectTemplateList;

            //Views
            window.ProjectTemplateView = Backbone.View.extend({

                //... is a list tag.
                tagName: "li",

                // Cache the template function for a single item.
                template: $("#projecttemplate-template"),

                // The DOM events specific to an item.
                events: {
                    "click .delete-btn": "clear",
                    "mouseenter div" : "hightlight",
                    "mouseleave div" : "nonHeighlight"
                },


                initialize: function () {
                    _.bindAll(this, 'render');
                    this.model.bind('change', this.render);
                    this.model.view = this;
                },

                // Re-render the contents of the todo item.
                render: function () {
                    $(this.el).html(this.template.tmpl(this.model.toJSON()));
                    return this;
                },
                nonHeighlight: function(){
                    
                    $(this.el).find('div').removeClass("highlight");
                    $(this.el).find('.delete-btn').animate({opacity:0.6},200);
                },
                hightlight: function(){
                    $(this.el).find('div').addClass("highlight");
                    $(this.el).find('.delete-btn').animate({opacity:1},300);
                },

          

                // Remove this view from the DOM.
                remove: function () {
                    $(this.el).remove();
                },

                // Remove the item, destroy the model.
                clear: function () {
                    this.model.clear();
                }

            });
            window.ProjectTemplateListView = Backbone.View.extend({
                el: $("#projecttemplate-list"),
                events: {
                    //                    "keypress #new-todo": "createOnEnter",
                },

                initialize: function () {
                    _.bindAll(this, 'addOne', 'addAll', 'render');

                    ProjectTemplates.bind('add', this.addOne);
                    ProjectTemplates.bind('refresh', this.addAll);
                    ProjectTemplates.bind('all', this.render);
                    ProjectTemplates.fetch();
                },

                render: function () {
                    if(ProjectTemplates.length == 0)
                        $(this.el).find('#noneElement').show();
                    else
                        $(this.el).find('#noneElement').hide();
                },

                // Add a single todo item to the list by creating a view for it, and
                // appending its element to the `<ul>`.
                addOne: function (projecttemplate) {
                    var view = new ProjectTemplateView({ model: projecttemplate });
                    var element = view.render().el;
                    this.el.append(element);
                },

                // Add all items in the **Todos** collection at once.
                addAll: function () {
                    ProjectTemplates.each(this.addOne);
                },

            });

            // Begin
            window.ProjectTemplatesView = new ProjectTemplateListView;
            ProjectTemplates.add([{Name:'shit'}]);
            EzDesk.Service.GetProjectTemplateList(function (projectTemplates) {
                ProjectTemplates.add(projectTemplates);
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <h2 style="display: inline-block;">
            项目模板
        </h2>
        <div id="links">
            <a href="/project/ProjectList" class="head">返回项目列表</a>
        </div>
    </div>
    <div id="page-body">
        <div style="margin-top: 20px; max-width: 400px;">
            <ul id="projecttemplate-list">
                <li id="noneElement">暂时没有项目模板 - 可以通过创建项目让后保存为模板的功能</li>
            </ul>
        </div>
        <div style="height: 20px;" id="log">
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
</asp:Content>
